<template>
	<div class="mainPagebox" ref='ContainersMain'>
		<el-row :gutter="10">
			<el-col :xs="24" :sm="0">
				<page-mobile v-if="!isExecute" class="pageMobile" ref="mobileRefMain"></page-mobile>
			</el-col>

			<el-col :xs="0" :sm='24' ref='Containers24Ref'>
				<div class="mainPage">
					<div class="pageLeft overflow">
						<div class="box">
							<div class="photo">
								<el-image style="width: 50px; height: 50px;border-radius: 50%;"
									:src="storeUserinfo.url+'?w=50&h=50&q=75'" fit="fill"
									:preview-src-list="[storeUserinfo.url]">
									<div slot="error" class="image-slot">
										<el-image style="width: 50px; height: 50px;border-radius: 50%;"
											:src="$handledImageError(storeUserinfo.url+'?w=50&h=50&q=75','tx')"
											fit="fill" :preview-src-list="[$handledImageError(storeUserinfo.url,'tx')]">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline" style="font-size: 50px;"></i>
											</div>
										</el-image>
									</div>
								</el-image>
							</div>
							<div class=" overflow" :title="`${storeUserinfo.username}`">
								{{storeUserinfo.username}}
							</div>
							<div style="font-size: 12px;color: #ccc;">ID:{{storeUserinfo.Id}}</div>
						</div>
						<div class="butBoxs">
							<div>
								<el-tooltip content="随缘建群" placement="top" :hide-after="700">
									<el-button class="marginT15" type="primary" circle size="mini"
										@click="openFaceToFacePage(true,1)"><i
											class="iconfont icon-onlineUsers"></i></el-button>
								</el-tooltip>
							</div>
							<div class="marginT15 shs-flex" style="justify-content: space-around;">
								<div class="">
									<el-tooltip content="修改个人信息" placement="top" :hide-after="700">
										<el-button class="" type="primary" circle size="mini"
											@click="handledShowUpdatePage"><i
												class="iconfont icon-shezhi"></i></el-button>
									</el-tooltip>
								</div>
								<div :class="{'tipItemPC':contactUntreatedCount}">
									<el-tooltip content="新的朋友" placement="top" :hide-after="700">
										<el-button type="primary" circle size="mini" @click="drawer=true"><i
												class="iconfont icon-user "></i></el-button>
									</el-tooltip>
								</div>
								<div class="">
									<el-tooltip content="面对面建群" placement="top" :hide-after="700">
										<el-button class="" type="primary" circle size="mini"
											@click="openFaceToFacePage(true,11)"><i
												class="iconfont icon-onlineUsers"></i></el-button>
									</el-tooltip>
								</div>
							</div>
							<div class="">
								<el-tooltip content="退出登录" placement="top" :hide-after="700">
									<el-button class="marginT15" type="primary" circle size="mini"
										@click="handleLogOut"><i class="iconfont icon-exit"></i></el-button>
								</el-tooltip>
							</div>
							<div class="marginT15 marginB15" >
								<el-button class="treeClass" type="primary" circle size="mini"
									@click="handledShowAiPage">树洞</el-button>
								</el-tooltip>
								<chat-container ref="ChatContainerRef" ></chat-container>
							</div>
						</div>

						<div class="">
							<el-image style="width: 150px; height: 150px;" :src="logoImage" fit="fill"
								:preview-src-list="[logoImage]">
							</el-image>
							<div class="" style="font-size:12px ;">
								扫码体验移动端
							</div>
						</div>
						<pageFaceToFace ref='FaceToFacePageRef'></pageFaceToFace>
						<pageFaceToFaceV ref='FaceToFacePageV2Ref'></pageFaceToFaceV>
						<el-drawer class="textLeft " size="435px" title="新的朋友" :visible.sync="drawer" direction="ltr"
							@open="handlerOpenDrawer" @closed="handlerClosedDrawer">
							<pageContacts :isGetList="drawer"></pageContacts>
						</el-drawer>
					</div>
					
					<page-middle ref='pageMiddleRef'></page-middle>
					<page-right></page-right>
				</div>
				<div class="color-smill marginT15 textCenter">
					当东方的太阳升起,世界将不再需要灯塔!
					<bottom-content-vue :ishome='true'></bottom-content-vue>
				</div>
				<user-info ref="pcUpdateRef"></user-info>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	import BottomContentVue from "@/components/BottomContent.vue"
	import pageMiddle from "@/views/main/pageMiddle"
	import pageRight from "@/views/main/pageRight"
	import pageContacts from "@/views/main/pageContacts"
	import pageFaceToFace from "@/views/main/pageFaceToFace"
	import pageFaceToFaceV from "@/views/main/pageFaceToFaceV2"
	import logoImage from "@/assets/logo.jpg"
	import userInfo from "@/components/userinfo/index"

	// 移动端
	import pageMobile from "@/views/mobile/pageMobile"

	import {
		MessageBox
	} from 'element-ui'
	import {
		confirmCconfig
	} from "@/utils/config"
	import {
		debounce
	} from "@/utils/common.js";

	import {
		getToken,
		setToken
	} from '@/utils/auth'
	import {
		getContactUntreated
	} from '@/api/relationshipUser'
	import {
		updateUser,
		getInfo,
		logout
	} from '@/api/user'

	import Storage from "@/utils/session.js"
	import ChatContainer from "@/components/ChatContainer/index"
	export default {
		name: "Index",
		components: {
			pageMiddle,
			pageRight,
			pageContacts,
			pageFaceToFace,
			pageFaceToFaceV,
			pageMobile,
			BottomContentVue,
			userInfo,
			ChatContainer
		},
		data() {
			return {
				logoImage,
				drawer: false, //是否显示 新的朋友模块
				sendMessage: "",
				updateObj: {
					url: ""
				},
				edit: {
					uflag: false
				},
				dialogVisibleImage: false,
				isExecute: "",
				contactUntreatedCount: 0, //获取未处理的好友请求数量
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo || ""
			},
			newMessage() {
				return this.$store.getters.newMessage || ""
			}
		},
		created() {
			// 调用
			if (this.storeUserinfo.Id) {
				return;
			}

			if (document.body.clientWidth < 768) {
				this.$store.commit("SetExecute", false)
			} else {
				this.$store.commit("SetExecute", true)
			}

			this.isExecute = this.$store.getters.isExecute;
			window.onresize = () => {
				try {
					this.$nextTick(() => {
						const currentWidth = document.body.clientWidth;
						if (!this.isExecute && currentWidth >= 768) {
							this.$store.commit("SetExecute", true);
							this.isExecute = true;
							// this.$refs['pageMiddleRef'].handleGroupSet(1, 1);
							this.$refs['pageMiddleRef'].initInfomation();
						} else if (this.isExecute && currentWidth < 768) {
							this.$store.commit("SetExecute", false);
							this.isExecute = false;
						}
					});
				} catch (error) {
					console.error('Error handling window resize:', error);
					// 可以在这里添加更多的错误处理逻辑
				}
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.handleInitUserInfomation();
			})
		},
		methods: {
			//获取未处理的好友请求
			contactUntreated() {
				getContactUntreated().then(res => {
					if (res.code == 200) {
						this.contactUntreatedCount = res.data.count || 0
					}
				})
			},
			handledShowUpdatePage() {
				this.$refs["pcUpdateRef"].initData(true)
			},
			handledShowAiPage() {
				this.$refs['ChatContainerRef'].handledInit(true)
			},
			//打开面对面建群 模块
			openFaceToFacePage(value, code) {
				if (code === 1) {
					this.$refs.FaceToFacePageRef.initData(value);
				} else if (code === 11) {
					this.$refs.FaceToFacePageV2Ref.initData(value);
				}
			},
			//退出登录
			handleLogOut: debounce(function() {
				MessageBox.confirm('确定退出？', '用户信息', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then((data) => {
					// location.reload()
					// //请求后端关闭websorket
					logout().then((data) => {
						confirmCconfig.isTure = true;
						this.$store.commit("setLogOut")
						this.$store.commit("socketLogOut");
						this.$router.push('login')
					}).catch(error => {
						this.$router.push('login')
						console.log("退出异常", error);
					})
				}).catch(err => {
					confirmCconfig.isTure = true;
				})
			}),
			handlerOpenDrawer() {},

			handlerClosedDrawer() {},
			// 信息初始化
			handleInitUserInfomation(data) {
				this.contactUntreated();
				let userInfo = JSON.parse(Storage.getSession());
				if (!this.storeUserinfo.Id && userInfo.Id != undefined) {
					this.$store.dispatch("actionGetInfo", userInfo).then(data => {
						this.$store.dispatch("socketInit", [data])
					})
				}
			}

		},
		watch: {
			newMessage: {
				deep: true, // 深度监听
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					//判断消息类型

					if (newVal.type === 2) {
						if (!this.$store.getters.isExecute) return
						this.$notify({
							title: '新好友通知',
							type: "info",
							iconClass: "notifyInfo",
							position: 'top-left',
							dangerouslyUseHTMLString: true,
							message: `<strong>[${newVal.fromUsername}]发来添加好友请求</strong>
							<i>点击查看</i>`,
							onClick: () => {
								if (this.$store.getters.isExecute) {
									this.drawer = true;
								}

							}
						});
					} else if (newVal.type == 333) {
						//更新用户信息
						this.$store.commit("setToken", newVal.token)
						this.$store.commit("setUserInfo", newVal.data)
						//重新建立websorket
						let sendobj = {
							type: 1022,
							message: "push token",
							token: newVal.token
						}
						this.$store.commit("setOnSend", sendobj)
					} else if (newVal.type == 3333) {
						//更新部分用户信息 无token
						let obj = {
							...this.storeUserinfo,
							...newVal.data
						}
						this.$store.commit("setUserInfo", obj)
					} else if (newVal.type == 1088) {
						try {
							//在线确认机制
							let sendobj = {
								type: 1089,
								message: "onlineOK",
								data: {
									userId: this.storeUserinfo.Id
								},
								token: newVal.token
							}
							this.$store.commit("setOnSend", sendobj)
						} catch (e) {
							console.log("在线确认机制err", e.message);
						}
					}
				},
				immediate: false // 页面初始化时是否触发回调
			}
		}
	}
</script>

<style>
	.mainPage {
		width: 100%;
		height: calc(100vh - 75px);
		min-width: 1280px;
		min-height: 641px;
		display: flex;
		justify-content: space-around;
	}

	.pageLeft {
		width: 11%;
		min-width: 100px;
		height: 100%;
		text-align: center;
	}

	.pageLeft .box {
		margin-top: 25px;
		padding: 10px;
		border: 1px solid #ccc;
	}

	.pageMobile {
		height: calc(100vh -100px);
		/* background-color: #f4f4f4; */

	}

	.tipItemPC::after {
		content: "";
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 10px;
		height: 10px;
		line-height: 10px;
		border-radius: 50%;
		position: relative;
		top: -16px;
		right: 8px;
		background-color: #f00;
	}
	.treeClass{
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		color: #5555ff;
	}
</style>